<template>
  <view class="learning-record-page">
    <!-- 顶部导航栏 -->
    <view class="custom-nav-bar">
      <view class="nav-left" @click="navBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-title">学习记录</view>
      <view class="nav-right" @click="showFilter">
        <text class="filter-icon">筛选</text>
      </view>
    </view>

    <!-- 学习数据概览 -->
    <view class="learning-stats">
      <view class="stat-item">
        <view class="stat-value">{{ totalDays }}</view>
        <view class="stat-label">累计学习天数</view>
      </view>
      <view class="stat-item">
        <view class="stat-value">{{ totalHours }}</view>
        <view class="stat-label">累计学习小时</view>
      </view>
      <view class="stat-item">
        <view class="stat-value">{{ completedCourses }}</view>
        <view class="stat-label">已完成课程</view>
      </view>
      <view class="stat-item">
        <view class="stat-value">{{ totalProgress }}%</view>
        <view class="stat-label">总体进度</view>
      </view>
    </view>

    <!-- 学习趋势图表 -->
    <view class="learning-trend">
      <view class="trend-title">近7天学习时长</view>
      <view class="chart-container">
        <view class="chart-bars">
          <view 
            class="chart-bar" 
            v-for="(day, index) in weeklyData" 
            :key="index"
            :style="{ 
              height: (day.hours / maxDailyHours * 100) + '%',
              backgroundColor: day.hours > 0 ? '#165DFF' : '#E5E6EB'
            }"
          ></view>
        </view>
        <view class="chart-labels">
          <view class="chart-label" v-for="(day, index) in weeklyData" :key="index">
            {{ day.label }}
          </view>
        </view>
      </view>
    </view>

    <!-- 学习记录列表 -->
    <view class="record-list">
      <view class="list-header">
        <view class="list-title">最近学习记录</view>
        <view class="list-count">{{ records.length }}条记录</view>
      </view>

      <!-- 按日期分组的学习记录 -->
      <view v-for="(group, date) in groupedRecords" :key="date">
        <view class="date-group-header">{{ formatDate(date) }}</view>
        
        <view 
          class="record-item" 
          v-for="(record, index) in group" 
          :key="index"
          @click="gotoCourseDetail(record.courseId)"
        >
          <view class="record-icon">
            <image 
              :src="record.courseCover" 
              mode="aspectFill"
            ></image>
          </view>
          
          <view class="record-info">
            <view class="course-title">{{ record.courseName }}</view>
            <view class="record-details">
              <view class="record-section">
                <text class="detail-label">章节：</text>
                <text class="detail-value">{{ record.chapter }}</text>
              </view>
              <view class="record-section">
                <text class="detail-label">时长：</text>
                <text class="detail-value">{{ formatDuration(record.duration) }}</text>
              </view>
            </view>
            <view class="record-time">{{ record.time }}</view>
          </view>
          
          <view class="record-progress" v-if="record.progress < 100">
            <view class="progress-bar">
              <view 
                class="progress-fill" 
                :style="{ width: record.progress + '%' }"
              ></view>
            </view>
            <view class="progress-text">{{ record.progress }}%</view>
          </view>
          
          <view class="record-completed" v-if="record.progress === 100">
            <text class="completed-icon">✓</text>
            <text class="completed-text">已完成</text>
          </view>
        </view>
      </view>
      
      <!-- 空记录状态 -->
      <view class="empty-record" v-if="records.length === 0">
        <view class="empty-icon">📚</view>
        <view class="empty-text">暂无学习记录</view>
        <view class="empty-subtext">开始你的学习之旅吧</view>
        <button class="start-btn" @click="gotoCourseList">
          浏览课程
        </button>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <u-popup 
      :show="filterPopup" 
      mode="bottom"
	  @close="filterPopup=false"
    >
      <view class="filter-dialog">
        <view class="dialog-title">筛选记录</view>
        
        <view class="filter-section">
          <view class="filter-label">时间范围</view>
          <view class="filter-options">
            <view 
              class="filter-option" 
              :class="{ selected: timeRange === option.value }"
              @click="timeRange = option.value"
              v-for="option in timeOptions"
              :key="option.value"
            >
              {{ option.label }}
            </view>
          </view>
        </view>
        
        <view class="filter-section">
          <view class="filter-label">课程类型</view>
          <view class="filter-options">
            <view 
              class="filter-option" 
              :class="{ selected: courseType === option.value }"
              @click="courseType = option.value"
              v-for="option in courseTypeOptions"
              :key="option.value"
            >
              {{ option.label }}
            </view>
          </view>
        </view>
        
        <view class="filter-section">
          <view class="filter-label">学习状态</view>
          <view class="filter-options">
            <view 
              class="filter-option" 
              :class="{ selected: studyStatus === option.value }"
              @click="studyStatus = option.value"
              v-for="option in statusOptions"
              :key="option.value"
            >
              {{ option.label }}
            </view>
          </view>
        </view>
        
        <view class="filter-actions">
          <button class="reset-btn" @click="resetFilter">重置</button>
          <button class="confirm-btn" @click="applyFilter">确认筛选</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>

export default {

  data() {
    return {
	filterPopup:false,
      // 学习统计数据
      totalDays: 28,
      totalHours: 67.5,
      completedCourses: 8,
      totalProgress: 65,
      
      // 近7天学习数据
      weeklyData: [
        { label: '一', hours: 2.5 },
        { label: '二', hours: 1.0 },
        { label: '三', hours: 0 },
        { label: '四', hours: 3.2 },
        { label: '五', hours: 1.8 },
        { label: '六', hours: 4.5 },
        { label: '日', hours: 2.0 }
      ],
      
      // 学习记录
      records: [
        {
          id: 'rec1',
          courseId: 'course101',
          courseName: 'Vue.js从入门到精通',
          courseCover: '/static/images/course1.jpg',
          chapter: '第5章：组件通信',
          duration: 45,
          time: '19:30',
          date: '2023-10-15',
          progress: 100,
          type: 'frontend'
        },
        {
          id: 'rec2',
          courseId: 'course203',
          courseName: '数据结构与算法基础',
          courseCover: '/static/images/course2.jpg',
          chapter: '第3章：二叉树',
          duration: 60,
          time: '15:45',
          date: '2023-10-15',
          progress: 75,
          type: 'algorithm'
        },
        {
          id: 'rec3',
          courseId: 'course101',
          courseName: 'Vue.js从入门到精通',
          courseCover: '/static/images/course1.jpg',
          chapter: '第4章：生命周期',
          duration: 35,
          time: '20:15',
          date: '2023-10-14',
          progress: 100,
          type: 'frontend'
        },
        {
          id: 'rec4',
          courseId: 'course302',
          courseName: 'Python数据分析实战',
          courseCover: '/static/images/course3.jpg',
          chapter: '第2章：Pandas基础',
          duration: 50,
          time: '16:30',
          date: '2023-10-13',
          progress: 60,
          type: 'data'
        },
        {
          id: 'rec5',
          courseId: 'course203',
          courseName: '数据结构与算法基础',
          courseCover: '/static/images/course2.jpg',
          chapter: '第2章：链表',
          duration: 40,
          time: '19:00',
          date: '2023-10-12',
          progress: 100,
          type: 'algorithm'
        }
      ],
      
      // 筛选条件
      timeOptions: [
        { label: '全部时间', value: 'all' },
        { label: '近7天', value: '7days' },
        { label: '近30天', value: '30days' },
        { label: '本学期', value: 'semester' }
      ],
      courseTypeOptions: [
        { label: '全部类型', value: 'all' },
        { label: '前端开发', value: 'frontend' },
        { label: '后端开发', value: 'backend' },
        { label: '数据科学', value: 'data' },
        { label: '算法', value: 'algorithm' }
      ],
      statusOptions: [
        { label: '全部状态', value: 'all' },
        { label: '已完成', value: 'completed' },
        { label: '进行中', value: 'inprogress' }
      ],
      
      // 当前筛选条件
      timeRange: 'all',
      courseType: 'all',
      studyStatus: 'all'
    };
  },
  
  computed: {
    // 分组的学习记录（按日期）
    groupedRecords() {
      const filtered = this.records.filter(record => {
        // 应用筛选条件
        let match = true;
        
        // 课程类型筛选
        if (this.courseType !== 'all' && record.type !== this.courseType) {
          match = false;
        }
        
        // 学习状态筛选
        if (this.studyStatus === 'completed' && record.progress < 100) {
          match = false;
        }
        if (this.studyStatus === 'inprogress' && record.progress === 100) {
          match = false;
        }
        
        // 时间范围筛选（简化实现）
        if (this.timeRange === '7days') {
          // 实际应用中应该比较日期
        }
        
        return match;
      });
      
      // 按日期分组
      return filtered.reduce((groups, record) => {
        const date = record.date;
        if (!groups[date]) {
          groups[date] = [];
        }
        groups[date].push(record);
        return groups;
      }, {});
    },
    
    // 一周中最大的学习时长（用于图表比例）
    maxDailyHours() {
      return Math.max(...this.weeklyData.map(day => day.hours), 1);
    }
  },
  
  methods: {
    // 返回上一页
    navBack() {
      uni.navigateBack({ delta: 1 });
    },
    
    // 显示筛选弹窗
    showFilter() {
      this.filterPopup = true;
    },
    
    // 重置筛选条件
    resetFilter() {
      this.timeRange = 'all';
      this.courseType = 'all';
      this.studyStatus = 'all';
    },
    
    // 应用筛选条件
    applyFilter() {
      this.filterPopup = false;
      // 在实际应用中，这里可能会调用API重新获取筛选后的记录
    },
    
    // 格式化日期显示
    formatDate(dateStr) {
      const date = new Date(dateStr);
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 1);
      
      if (date >= today) {
        return '今天';
      } else if (date >= yesterday) {
        return '昨天';
      } else {
        return `${date.getMonth() + 1}月${date.getDate()}日`;
      }
    },
    
    // 格式化时长显示
    formatDuration(minutes) {
      if (minutes >= 60) {
        const hours = Math.floor(minutes / 60);
        const mins = minutes % 60;
        return `${hours}小时${mins}分钟`;
      } else {
        return `${minutes}分钟`;
      }
    },
    
    // 前往课程详情
    gotoCourseDetail(courseId) {
      uni.navigateTo({
        url: `/pages/study/course-detail?id=${courseId}`
      });
    },
    
    // 前往课程列表
    gotoCourseList() {
      uni.navigateTo({
        url: '/pages/study/course-list'
      });
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary-color: #165DFF;
$primary-light: #E8F3FF;
$primary-dark: #0E42D2;
$success-color: #00B42A;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$background: #F5F7FA;
$card-bg: #FFFFFF;
$border-color: #E5E6EB;

.learning-record-page {
  background-color: $background;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-top: var(--status-bar-height);
}

// 自定义导航栏
.custom-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  padding: 0 30rpx;
  background-color: $card-bg;
  border-bottom: 1px solid $border-color;
  
  .nav-left, .nav-right {
    width: 80rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .back-icon {
    font-size: 45rpx;
    color: $text-primary;
  }
  
  .filter-icon {
    font-size: 28rpx;
    color: $primary-color;
    padding: 8rpx 12rpx;
    border-radius: 6rpx;
  }
  
  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: $text-primary;
  }
}

// 学习数据概览
.learning-stats {
  display: flex;
  background-color: $card-bg;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  
  .stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .stat-value {
      font-size: 36rpx;
      font-weight: 700;
      color: $text-primary;
      margin-bottom: 10rpx;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -5rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background-color: $primary-color;
        border-radius: 3rpx;
        opacity: 0.8;
      }
    }
    
    .stat-label {
      font-size: 24rpx;
      color: $text-secondary;
      margin-top: 10rpx;
    }
  }
}

// 学习趋势图表
.learning-trend {
  background-color: $card-bg;
  padding: 25rpx 30rpx;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  margin: 0 20rpx 20rpx;
  
  .trend-title {
    font-size: 28rpx;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 30rpx;
  }
  
  .chart-container {
    height: 220rpx;
    display: flex;
    flex-direction: column;
  }
  
  .chart-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding-bottom: 15rpx;
  }
  
  .chart-bar {
    width: 30rpx;
    border-radius: 4rpx;
    transition: height 0.3s ease;
  }
  
  .chart-labels {
    height: 30rpx;
    display: flex;
    justify-content: space-around;
  }
  
  .chart-label {
    width: 30rpx;
    text-align: center;
    font-size: 22rpx;
    color: $text-tertiary;
  }
}

// 学习记录列表
.record-list {
  padding: 0 20rpx 100rpx;
  
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    margin-bottom: 10rpx;
    
    .list-title {
      font-size: 28rpx;
      font-weight: 600;
      color: $text-primary;
    }
    
    .list-count {
      font-size: 24rpx;
      color: $text-tertiary;
    }
  }
  
  .date-group-header {
    font-size: 24rpx;
    color: $text-secondary;
    padding: 15rpx 0;
    font-weight: 500;
  }
  
  .record-item {
    display: flex;
    background-color: $card-bg;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 15rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
    align-items: center;
    
    .record-icon {
      width: 120rpx;
      height: 120rpx;
      border-radius: 10rpx;
      overflow: hidden;
      margin-right: 20rpx;
      flex-shrink: 0;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .record-info {
      flex: 1;
      min-width: 0;
      
      .course-title {
        font-size: 26rpx;
        color: $text-primary;
        font-weight: 500;
        margin-bottom: 10rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .record-details {
        display: flex;
        flex-wrap: wrap;
        gap: 15rpx;
        margin-bottom: 8rpx;
        
        .record-section {
          display: flex;
          align-items: center;
          
          .detail-label {
            font-size: 22rpx;
            color: $text-tertiary;
          }
          
          .detail-value {
            font-size: 22rpx;
            color: $text-secondary;
          }
        }
      }
      
      .record-time {
        font-size: 22rpx;
        color: $text-tertiary;
      }
    }
    
    .record-progress {
      width: 120rpx;
      margin-left: 15rpx;
      flex-shrink: 0;
      
      .progress-bar {
        width: 100%;
        height: 8rpx;
        background-color: $border-color;
        border-radius: 4rpx;
        margin-bottom: 8rpx;
        overflow: hidden;
        
        .progress-fill {
          height: 100%;
          background-color: $primary-color;
          border-radius: 4rpx;
        }
      }
      
      .progress-text {
        font-size: 22rpx;
        color: $primary-color;
        text-align: right;
      }
    }
    
    .record-completed {
      width: 120rpx;
      margin-left: 15rpx;
      flex-shrink: 0;
      text-align: right;
      
      .completed-icon {
        display: inline-block;
        width: 24rpx;
        height: 24rpx;
        background-color: $success-color;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 24rpx;
        font-size: 18rpx;
        margin-right: 5rpx;
      }
      
      .completed-text {
        font-size: 22rpx;
        color: $success-color;
      }
    }
  }
  
  // 空记录状态
  .empty-record {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 180rpx;
    
    .empty-icon {
      font-size: 120rpx;
      color: $text-tertiary;
      margin-bottom: 40rpx;
      opacity: 0.6;
    }
    
    .empty-text {
      font-size: 30rpx;
      color: $text-secondary;
      margin-bottom: 15rpx;
      font-weight: 500;
    }
    
    .empty-subtext {
      font-size: 24rpx;
      color: $text-tertiary;
      margin-bottom: 50rpx;
    }
    
    .start-btn {
      width: 300rpx;
      height: 80rpx;
      line-height: 80rpx;
      background-color: $primary-color;
      color: #fff;
      border: none;
      border-radius: 40rpx;
      font-size: 28rpx;
      box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.25);
    }
  }
}

// 筛选弹窗
.filter-dialog {
  background-color: $card-bg;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding: 30rpx;
  width: 100%;
  
  .dialog-title {
    font-size: 30rpx;
    font-weight: 600;
    color: $text-primary;
    text-align: center;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid $border-color;
  }
  
  .filter-section {
    margin-bottom: 35rpx;
    
    .filter-label {
      font-size: 26rpx;
      color: $text-primary;
      margin-bottom: 15rpx;
      font-weight: 500;
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 15rpx;
    }
    
    .filter-option {
      padding: 12rpx 25rpx;
      background-color: $background;
      border: 1px solid $border-color;
      border-radius: 25rpx;
      font-size: 24rpx;
      color: $text-secondary;
      white-space: nowrap;
      
      &.selected {
        background-color: $primary-light;
        border-color: $primary-color;
        color: $primary-color;
      }
    }
  }
  
  .filter-actions {
    display: flex;
    gap: 20rpx;
    margin-top: 20rpx;
    
    .reset-btn, .confirm-btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      border-radius: 12rpx;
      font-size: 28rpx;
      font-weight: 500;
    }
    
    .reset-btn {
      background-color: $background;
      color: $text-primary;
      border: 1px solid $border-color;
    }
    
    .confirm-btn {
      background-color: $primary-color;
      color: #fff;
      border: none;
      box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.25);
    }
  }
}
</style>
    